//color
.color-primary  {color:$primary !important;}
.color-success  {color:$success !important}
.color-info     {color:$info !important}
.color-warning  {color:$warning !important}
.color-danger   {color:$danger !important}

.color-stable     {color:$stable !important}
.color-positive   {color:$positive !important;}
.color-calm       {color:$calm !important;}
.color-balanced   {color:$balanced !important;}
.color-energized  {color:$energized !important;}
.color-assertive  {color:$assertive !important;}
.color-royal      {color:$royal !important;}

.color-0    {color: #000000 !important;}
.color-1    {color: #111111 !important;}
.color-2    { color: #222222 !important;}
.color-3c   { color: #3c3c3c !important;}
.color-3    { color: #333333 !important;}
.color-4    { color: #444444 !important;}
.color-5    { color: #555555 !important;}
.color-6    { color: #666666 !important;}
.color-7    { color: #777777 !important;}
.color-8    { color: #888888 !important;}
.color-9    { color: #999999 !important;}
.color-a    { color: #aaaaaa !important;}
.color-b    { color: #bbbbbb !important;}
.color-c    { color: #cccccc !important;}
.color-d    { color: #dddddd !important;}
.color-e    { color: #eeeeee !important;}
.color-f   { color: #ffffff !important;}

//bg
//.bg-primary     {@include bg-color-var($primary)}
//.bg-success     {@include bg-color-var($success)}
//.bg-info        {@include bg-color-var($info)}
//.bg-warning     {@include bg-color-var($warning)}
//.bg-danger      {@include bg-color-var($danger)}
//
//.bg-stable     {@include bg-color-var($stable)}
//.bg-positive   {@include bg-color-var($positive)}
//.bg-calm       {@include bg-color-var($calm )}
//.bg-balanced   {@include bg-color-var($balanced )}
//.bg-energized  {@include bg-color-var($energized)}
//.bg-assertive  {@include bg-color-var($assertive )}
//.bg-royal      {@include bg-color-var($royal)}

.bg-0   {background-color: #000000 !important;}
.bg-1   {background-color: #111111 !important;}
.bg-2   {background-color: #222222 !important;}
.bg-3c  {background-color: #3c3c3c !important;}
.bg-3   {background-color: #333333 !important;}
.bg-4   {background-color: #444444 !important;}
.bg-5   {background-color: #555555 !important;}
.bg-6   {background-color: #666666 !important;}
.bg-7   {background-color: #777777 !important;}
.bg-8   {background-color: #888888 !important;}
.bg-9   {background-color: #999999 !important;}
.bg-a   {background-color: #aaaaaa !important;}
.bg-b   {background-color: #bbbbbb !important;}
.bg-c   {background-color: #cccccc !important;}
.bg-d   {background-color: #dddddd !important;}
.bg-e   {background-color: #eeeeee !important;}
.bg-f   {background-color: #ffffff !important;}

//border
.border-ca  {border-color:#aaa !important;}
.border-cb  {border-color:#bbb !important; }
.border-cc  {border-color:#ccc !important; }
.border-cd  {border-color:#ddd !important; }
.border-ce  {border-color:#eee !important; }
.border-cf  {border-color:#fff !important; }

.num-r{color:$danger !important;}


.bg-stable{
    @include icon-color-variant($font-color, $stable)
}
.bg-positive{
    @include icon-color-variant($font-color, $positive)
}
.bg-calm{
    @include icon-color-variant($font-color, $calm)
}
.bg-balanced{
    @include icon-color-variant($font-color, $balanced)
}
.bg-energized{
    @include icon-color-variant($font-color, $energized)
}
.bg-assertive{
    @include icon-color-variant($font-color, $assertive)
}
.bg-royal{
    @include icon-color-variant($font-color, $royal)
}
.bg-gray-light{
    @include icon-color-variant($font-color, $gray-light)
}

.bg-primary{
    @include icon-color-variant($font-color, $primary)
}
.bg-danger{
    @include icon-color-variant($font-color, $danger)
}
.bg-success{
    @include icon-color-variant($font-color, $success)
}
.bg-info{
    @include icon-color-variant($font-color, $info)
}
.bg-warning{
    @include icon-color-variant($font-color, $warning)
}
.bg-maincolor{
    @include icon-color-variant($font-color, $main-color)
}
.bg-dark{
    @include icon-color-variant($font-color, $dark)
}
.bg-white{
    @include icon-color-variant(#3c3c3c, $font-color)
}

.icon-outline{
    &.c-light{
        @include border-color-variant(1px, solid, $light)
    }
    &.c-stable{
        @include border-color-variant(1px, solid, $stable)
    }
    &.c-positive{
        @include border-color-variant(1px, solid, $positive)
    }
    &.c-calm{
        @include border-color-variant(1px, solid, $calm)
    }
    &.c-balanced{
        @include border-color-variant(1px, solid, $balanced)
    }
    &.c-energized{
        @include border-color-variant(1px, solid, $energized)
    }

    &.c-assertive{
        @include border-color-variant(1px, solid, $assertive)
    }
    &.c-royal{
        @include border-color-variant(1px, solid, $royal)
    }
    &.c-dark{
        @include border-color-variant(1px, solid, $dark)
    }
    &.c-primary{
        @include border-color-variant(1px, solid, $primary)
    }
    &.c-success{
        @include border-color-variant(2px, solid, $success)
    }
    &.c-info{
        @include border-color-variant(1px, solid, $info)
    }
    &.c-warning{
        @include border-color-variant(1px, solid, $warning)
    }
    &.c-danger{
        @include border-color-variant(1px, solid, $danger)
    }
}


    
